<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 简约设计</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="js/auth.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
        }

        :root {
            --primary: #2c6fbb;
            --primary-light: #e8f2fc;
            --text: #333;
            --text-light: #666;
            --border: #e0e0e0;
            --background: #f8fafc;
            --white: #ffffff;
            --shadow: rgba(0, 0, 0, 0.08);
        }

        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部样式 */
        header {
            padding: 80px 0 60px;
            text-align: center;
            background: linear-gradient(135deg, #f8fafc 0%, #e8f2fc 100%);
        }

        .header-content {
            max-width: 700px;
            margin: 0 auto;
        }

        h1 {
            font-size: 2.8rem;
            font-weight: 300;
            margin-bottom: 20px;
            color: var(--primary);
            letter-spacing: -0.5px;
        }

        .subtitle {
            font-size: 1.2rem;
            color: var(--text-light);
            font-weight: 400;
            margin-bottom: 30px;
        }

        .divider {
            width: 80px;
            height: 3px;
            background: var(--primary);
            margin: 0 auto 40px;
            border-radius: 3px;
        }

        /* 联系信息卡片 */
        .contact-section {
            padding: 60px 0;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .contact-card {
            background: var(--white);
            border-radius: 12px;
            padding: 35px 30px;
            box-shadow: 0 5px 20px var(--shadow);
            transition: all 0.3s ease;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(44, 111, 187, 0.15);
        }

        .contact-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .contact-card:hover::before {
            opacity: 1;
        }

        .contact-icon {
            width: 70px;
            height: 70px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: var(--primary);
            font-size: 1.8rem;
        }

        .contact-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--text);
            font-weight: 600;
        }

        .contact-info {
            color: var(--text-light);
            margin-bottom: 15px;
            line-height: 1.8;
        }

        .contact-link {
            color: var(--primary);
            text-decoration: none;
            display: inline-block;
            margin-top: 10px;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .contact-link:hover {
            color: #1a4d8c;
        }

        /* 表单区域 */
        .form-section {
            background: var(--white);
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 60px;
        }

        .form-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .form-content {
            padding: 50px;
        }

        .form-title {
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: var(--text);
            font-weight: 500;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
            font-size: 0.95rem;
        }

        input, textarea {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #fcfdfe;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(44, 111, 187, 0.1);
        }

        textarea {
            min-height: 150px;
            resize: vertical;
        }

        .submit-btn {
            background: var(--primary);
            color: var(--white);
            border: none;
            padding: 15px 40px;
            border-radius: 8px;
            font-size: 1.05rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }

        .submit-btn i {
            margin-left: 10px;
            transition: transform 0.3s ease;
        }

        .submit-btn:hover {
            background: #1a4d8c;
        }

        .submit-btn:hover i {
            transform: translateX(5px);
        }

        .form-image {
            background: linear-gradient(135deg, #2c6fbb 0%, #1a4d8c 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .form-image-content {
            color: white;
            max-width: 400px;
            text-align: center;
        }

        .form-image-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            font-weight: 300;
        }

        .form-image-desc {
            opacity: 0.85;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-link {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px);
        }

        /* 地图区域 */
        .map-section {
            padding-bottom: 60px;
        }

        .map-container {
            height: 450px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
            background: #eaeaea;
            position: relative;
        }

        .map-overlay {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 12px;
            max-width: 300px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .map-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--text);
        }

        .map-address {
            color: var(--text-light);
            line-height: 1.7;
        }

        /* 页脚 */
        footer {
            background: var(--text);
            color: #a0aec0;
            padding: 30px 0;
            text-align: center;
        }

        .footer-content {
            max-width: 600px;
            margin: 0 auto;
        }

        .copyright {
            font-size: 0.95rem;
            margin-top: 20px;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .form-container {
                grid-template-columns: 1fr;
            }

            .form-image {
                padding: 40px 20px;
            }
        }

        @media (max-width: 768px) {
            header {
                padding: 60px 0 40px;
            }

            h1 {
                font-size: 2.2rem;
            }

            .form-content {
                padding: 40px 30px;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .contact-grid {
                gap: 20px;
            }

            .form-content {
                padding: 30px 20px;
            }

            .map-container {
                height: 350px;
            }
        }
    </style>
</head>
<body data-require-login="true">
<!-- 头部区域 -->
<header>
    <div class="container header-content">
        <h1>联系我们</h1>
        <div class="divider"></div>
        <p class="subtitle">我们随时准备为您提供帮助。无论是咨询问题、提出建议还是反馈意见，我们都期待听到您的声音。</p>
    </div>
</header>

<!-- 联系信息 -->
<section class="contact-section">
    <div class="container">
        <div class="contact-grid">
            <!-- 电话卡片 -->
            <div class="contact-card">
                <div class="contact-icon">
                    <i class="fas fa-phone-alt"></i>
                </div>
                <h3 class="contact-title">电话联系</h3>
                <p class="contact-info">周一至周五: 9:00 - 18:00</p>
                <p class="contact-info">周六: 10:00 - 16:00</p>
                <a href="tel:+86123456789" class="contact-link">+86 123 456 789</a>
            </div>

            <!-- 邮箱卡片 -->
            <div class="contact-card">
                <div class="contact-icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <h3 class="contact-title">电子邮件</h3>
                <p class="contact-info">发送邮件至我们的支持团队，我们将在24小时内回复您</p>
                <a href="mailto:contact@company.com" class="contact-link">contact@company.com</a>
            </div>

            <!-- 地址卡片 -->
            <div class="contact-card">
                <div class="contact-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <h3 class="contact-title">公司地址</h3>
                <p class="contact-info">北京市朝阳区科技园88号</p>
                <p class="contact-info">创新大厦15层</p>
                <a href="#map" class="contact-link">查看地图位置</a>
            </div>
        </div>

        <!-- 表单区域 -->
        <div class="form-section">
            <div class="form-container">
                <div class="form-content">
                    <h3 class="form-title">发送消息</h3>
                    <div class="form-group">
                        <label for="name">您的姓名</label>
                        <input type="text" id="name" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" placeholder="请输入您的电子邮箱">
                    </div>
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject" placeholder="请输入消息主题">
                    </div>
                    <div class="form-group">
                        <label for="message">您的消息</label>
                        <textarea id="message" placeholder="请在此输入您的消息..."></textarea>
                    </div>
                    <button class="submit-btn">发送消息 <i class="fas fa-paper-plane"></i></button>
                </div>

                <div class="form-image">
                    <div class="form-image-content">
                        <h3 class="form-image-title">直接联系我们</h3>
                        <p class="form-image-desc">如果您有紧急问题或需要立即帮助，请使用我们的电话或邮箱联系我们，我们的团队将尽快为您提供支持。</p>

                        <div class="social-links">
                            <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-qq"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 地图区域 -->
        <div class="map-section">
            <div id="map" class="map-container">
                <!-- 这里使用静态地图图片，实际项目中可替换为Google Maps等 -->
                <div style="width:100%;height:100%;background:linear-gradient(rgba(44,111,187,0.1), rgba(44,111,187,0.1)), url('https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80'); background-size:cover; background-position:center;"></div>

                <div class="map-overlay">
                    <h4 class="map-title">我们的办公室</h4>
                    <p class="map-address">
                        北京市朝阳区科技园88号<br>
                        创新大厦15层1502室<br>
                        邮编: 100000
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <p class="copyright">© 2023 公司名称 版权所有 | 简约设计联系页面</p>
        </div>
    </div>
</footer>

<script>
    // 表单交互效果
    const formInputs = document.querySelectorAll('input, textarea');

    formInputs.forEach(input => {
        // 添加焦点效果
        input.addEventListener('focus', function() {
            this.parentElement.style.transform = 'translateY(-2px)';
        });

        input.addEventListener('blur', function() {
            this.parentElement.style.transform = '';
        });

        // 添加输入效果
        input.addEventListener('input', function() {
            if (this.value) {
                this.style.background = '#ffffff';
            } else {
                this.style.background = '#fcfdfe';
            }
        });
    });

    // 表单提交
    const submitBtn = document.querySelector('.submit-btn');

    submitBtn.addEventListener('click', function() {
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;

        if (!name || !email) {
            alert('请填写您的姓名和邮箱');
            return;
        }

        // 按钮动画效果
        this.innerHTML = '发送中 <i class="fas fa-spinner fa-spin"></i>';
        this.disabled = true;

        // 模拟提交
        setTimeout(() => {
            this.innerHTML = '发送成功 <i class="fas fa-check"></i>';

            // 重置表单
            setTimeout(() => {
                document.getElementById('name').value = '';
                document.getElementById('email').value = '';
                document.getElementById('subject').value = '';
                document.getElementById('message').value = '';

                this.innerHTML = '发送消息 <i class="fas fa-paper-plane"></i>';
                this.disabled = false;

                alert('消息已成功发送！我们将尽快回复您。');
            }, 1500);
        }, 2000);
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();

            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
</script>
</body>
</html>